<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 左侧装饰区域 -->
      <div class="decoration-area">
        <div class="company-info">
          <h1>党员发展管理系统</h1>
          <p>欢迎使用党员发展管理系统</p>
        </div>
        <div class="svg-container">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="login-svg">
            <path d="M488.6 250c0 131.4-106.6 238-238 238S12.5 381.4 12.5 250 119.1 12 250.5 12s238 106.6 238 238z"
              fill="#fff" opacity=".2" />
            <path
              d="M250 0C111.9 0 0 111.9 0 250s111.9 250 250 250 250-111.9 250-250S388.1 0 250 0zm0 450c-110.5 0-200-89.5-200-200S139.5 50 250 50s200 89.5 200 200-89.5 200-200 200z"
              fill="#409EFF" opacity=".2" />
            <circle cx="250" cy="250" r="150" fill="#409EFF" opacity=".1" />
            <path
              d="M390 250c0 77.3-62.7 140-140 140s-140-62.7-140-140 62.7-140 140-140 140 62.7 140 140zM215 350l120-120M215 150l120 120"
              stroke="#409EFF" stroke-width="8" fill="none" />
          </svg>
        </div>
      </div>

      <!-- 右侧登录区域 -->
      <div class="form-area">
        <el-card class="login-card" shadow="never">
          <div class="card-header">
            <h2>账户登录</h2>
          </div>

          <el-form :model="loginForm" @submit.prevent="handleLogin" label-position="top" :rules="rules"
            ref="loginFormRef" class="login-form">
            <el-form-item label="账号" prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入账号" size="large">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password" show-password placeholder="请输入密码" size="large">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <div class="remember-forgot">
              <el-checkbox v-model="loginForm.rememberMe" checked>记住我</el-checkbox>
              <a href="#" class="forgot-link">忘记密码?</a>
            </div>

            <el-form-item>
              <el-button type="primary" native-type="submit" class="login-button" :loading="loading" size="large">
                登录
              </el-button>
            </el-form-item>
          </el-form>

          <div class="footer-links">
            <p>没有账号? <router-link to="/register">立即注册</router-link></p>
          </div>
        </el-card>

        <!-- 右下角SVG装饰 -->
        <div class="corner-decoration">
          <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 100 100">
            <circle cx="90" cy="90" r="40" fill="#409EFF" opacity="0.1" />
            <circle cx="90" cy="90" r="30" fill="#409EFF" opacity="0.1" />
            <circle cx="90" cy="90" r="20" fill="#409EFF" opacity="0.1" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { login } from '@/api/auth';

const store = useStore();
const router = useRouter();
const loginFormRef = ref(null);
const loading = ref(false);

const loginForm = ref({
  username: '',
  password: '',
  rememberMe: false
});

const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;

  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        // 调用后端登录API
        const response = await login({
          account: loginForm.value.username,
          pwd: loginForm.value.password,
        });

        // 处理新的响应格式 {code, msg, data}
        if (response.data.code === 200) {
          console.log(response.data);
          // 从响应数据中获取token和角色信息
          const token = response.data.data.token;
          const role = response.data.data.user.role;
          const userId = response.data.data.user.id;

          // 检查用户角色，如果是普通用户则拒绝登录
          if (role === '用户') {
            ElMessage.error('您没有权限访问管理系统，请联系管理员');
            loading.value = false;
            return;
          }

          // 保存token到localStorage
          localStorage.setItem('token', token);
          // 保存角色信息
          localStorage.setItem('userRole', role);

          // 保存token到Vuex
          store.dispatch('login', { token, role,userId });

          ElMessage.success(response.data.msg || '登录成功');

          // 跳转到仪表盘页面
          router.push('/dashboard');
        } else {
          ElMessage.error(response.data.msg || '登录失败');
        }
      } catch (error) {
        console.error('登录错误:', error);
        ElMessage.error(error.response?.data?.msg || '登录失败，请检查账号和密码');
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  position: relative;
  margin: 0;
  padding: 30px 0;
  overflow-y: auto;
}

.login-container {
  display: flex;
  width: 80%;
  min-height: 600px;
  /* 固定最小高度 */
  height: auto;
  /* 改为自动高度，让内容决定高度 */
  max-width: 1200px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* 修改为hidden防止内容溢出 */
}

/* 左侧装饰区域 */
.decoration-area {
  flex: 1;
  background: linear-gradient(135deg, #409EFF 0%, #64b5f6 100%);
  color: white;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 改为从顶部开始 */
  position: relative;
  height: auto;
  /* 自动高度 */
}

.company-info {
  z-index: 2;
}

.company-info h1 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
}

.company-info p {
  font-size: 18px;
  opacity: 0.9;
  max-width: 300px;
  line-height: 1.6;
}

.svg-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  pointer-events: none;
  /* 防止SVG阻止鼠标事件 */
  overflow: hidden;
  /* 防止SVG溢出 */
}

.login-svg {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 100%;
}

/* 右侧表单区域 */
.form-area {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: auto;
  /* 自动高度 */
}

.login-card {
  border: none;
  box-shadow: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.card-header h2 {
  font-size: 28px;
  font-weight: 500;
  color: #303133;
}

.login-form {
  padding: 0 20px;
  flex-grow: 1;
}

.login-button {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  font-size: 16px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.forgot-link {
  color: #409EFF;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}

.footer-links {
  text-align: center;
  margin-top: 20px;
  color: #606266;
}

.footer-links a {
  color: #409EFF;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.corner-decoration {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
  /* 防止SVG阻止鼠标事件 */
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  border-radius: 4px;
}

:deep(.el-button--primary) {
  background-color: #409EFF;
}

/* 响应式调整 */
@media screen and (max-width: 1024px) {
  .login-container {
    width: 90%;
    flex-direction: column;
    height: auto;
  }

  .decoration-area {
    padding: 30px;
    min-height: 200px;
    max-height: 250px;
    /* 在移动视图限制高度 */
  }

  .company-info h1 {
    font-size: 28px;
  }

  .company-info p {
    font-size: 16px;
  }
}
</style>